/**
 * Created by jiangtao on 2017/11/17.
 */
import React , { Component, PropTypes } from 'react';

import styles from './style.scss';

import TableView from './TableView';

class Index extends Component {
    constructor( props ){
        super();
        this.state = {
            page:props.initPage
        }
    }

    static propTypes = {
        tabBarPosition: PropTypes.oneOf(['top', 'bottom']),
        onChangeTab:PropTypes.func,
        tableLabel:PropTypes.array,
        initPage:PropTypes.number,
        animate:PropTypes.bool,
        pageLazyLoad:PropTypes.bool,
    };

    static  defaultProps={
        tabBarPosition:"top",
        onChangeTab:()=>{},
        tableLabel:[],
        initPage:0,
        animate:true,
        pageLazyLoad:true
    };

    tabChange( index ){
        const { onChangeTab } = this.props;
        const { page } = this.state;
        if(page === index ) return;
        this.setState({
            page:index
        },()=> onChangeTab(index));
    }

    componentWillReceiveProps(nextProps){
        const { page } = nextProps;
        const { state } = this;
        if( page!== state.page ) {
            this.setState({
                page
            });
        }
    }

    renderHeader(){
        const { page } = this.state;
        const { tableLabel } = this.props;
        if(tableLabel.length <=0 ) return null;
        return (
            <div className={styles.table_view_header_outer}>
                <div className={styles.table_view_header}>
                    {tableLabel.map(( name , index ) => {
                        const active = index === page;
                        return (
                            <div
                                key={index}
                                onClick={()=>this.tabChange(index)}
                                className={classname(
                                    styles.header_label,
                                    active && styles.header_label_active
                                )}
                            >
                                {name}
                            </div>
                        )
                    })}
                </div>
                <div className={styles.indicator_line}>
                    <div
                        className={styles.line}
                        style={{
                            width:`${1/tableLabel.length * 100}%`,
                            transform:`translateX(${page*100}%)`,
                            WebkitTransform:`translateX(${page*100}%)`
                        }}
                    />
                </div>
            </div>
        )
    }
    render(){
        const { page } = this.state;
        const { tabBarPosition , children ,animate , pageLazyLoad } = this.props;
        return(
            <TableView
                page={page}
                animate={animate}
                pageLazyLoad={pageLazyLoad}
                renderHeader={()=>tabBarPosition==="top" && this.renderHeader()}
                renderFooter={()=>tabBarPosition==="bottom" && this.renderHeader()}
                onChangeBefore={(nextPage)=>this.tabChange(nextPage)}
            >
                {children}
            </TableView>
        )
    }
}


export default Index;